<template>
	<view style="padding: 0 20rpx;">
		<view class="all">
			<view class="flex-align-center v-padding">
				
				<view>
					<view>商品评价</view>
				</view>
			</view>
			<view class="v-shop-cart flex-columns">
				<view class="flex-align-center">
					<!-- <image class="border10" :src="detailList.foods_img"></image> -->
					<image class="border10" :src="orderInfo.pic_url"></image>
					<view class="flex-columns v-content flex1" style="height: 148rpx;">
						<view class="flex-between">
							<!-- <view class="v-name">{{ detailList.foods_name }}</view> -->
							<view class="v-name">{{orderInfo.goods_name}}</view>
						</view>
						<!-- 需修改样式‘上下底部对齐’ -->
						<!-- <text v-if="detailList.service_desc">周期服务：{{ detailList.service_desc }}</text> -->
							<view >规格：{{orderInfo.spec_name?orderInfo.spec_name:'无'}}</view>
						<view v-if="type==0" class="v-price">￥{{orderInfo.price}}</view>
						<view v-if="type==1" class="v-price">￥{{orderInfo.total}}</view>
						<view v-if="type==2" class="v-price">￥{{orderInfo.total}}</view>
						<view v-if="type==3" class="v-price">￥{{orderInfo.total}}</view>
						<view v-if="type==4" class="v-price">￥{{orderInfo.total}}</view>
						<view v-if="type==5" class="v-price">￥{{orderInfo.money}}</view>
						<!-- <view class="v-price">￥{{ detailInfo.goods.discount }}</view> -->
					</view>
				</view>
			</view>
		
		</view>
		<view class="zongs">
			<view class="flex-align-center v-m-btn " style="padding: 20rpx 14rpx;">
				<view class="speak">评价星级</view>
				<sunui-star :defaultStar="defaultStar" :maxStar="5" :starSize="'1.6em'" @changeStar="changeStar" class="sunui-star" />
			</view>
			
			<view class="coupon">
				<view class="textarea-box">
					<textarea v-model="text" placeholder="对此商品有什么评价" maxlength="50" @input="descInput" style="height: 200rpx;" />
					<view class="textarea-color">{{ remnant }}/50</view>
				</view>
			</view>
			<view class=" " style="margin-left: 24rpx;">
				<sunui-upimg1 class="margin-top_20rpx" :border="'1px dashed #bfbfbf'" :formData="imgFormData"
					:storageMode="storageMode" :header="header" :size="['200rpx', '200rpx']" btnName="上传评价图"
					:uploadServerUrl="upPicUrl" ref="selectimgandupload" @uploaded="imgLoaded" @change="imgsChange"
					:maxFileNumber="5"><template v-slot:icon>
						<uni-icons type="camera-filled" color="#1890FF" size="40"></uni-icons>
					</template></sunui-upimg1>
				
				
			</view>
			<view class="flex margin-top_60rpx"><view class="flex" :class="text ? 'addSpeak2' : 'addSpeak'" @click="addSpeakss()">提交评价</view></view>
		</view>
		
	</view>
</template>

<script>
import antiThrottling from '@/utils/antiThrottling.js';
export default {
	data() {
		return {
		
			text: '',
			imgFormData: null,
		
			storageMode: "2",
			header: null,
			upPicUrl: null,
		
			img: [],
			imgStr: [],

		
			remnant: 0,
			defaultStar: 5,
		
			orderInfo: {},
			roderGoods: [],
			// 总计数
			addNumber: 0,
			// 未使用 可删除
			type: 1,
			idsStr: '',
			
		};
	},
	onLoad(options) {
		
		
		this.id = options.orderId;
		
		
		// 1普通商品 2 团购
		this.type = options.type;
		console.log(options)
		
		
		this.Orderinfo(this.type);
		// if(this.type==0){
		// 	this.Orderinfo();
		// }else if(this.type==1){
		// 	this.grouponOrderDetail()
		// }
		
		// this.addNumber = options.addNumber;
	},
	onShow() {
		this.setDefaultStar();
		antiThrottling.releaseKey('submit');
	},
	methods: {
		
		imgsChange(file) {
		
			console.log('上传发生改变this.storageMode1111============', this.storageMode, '参数file', file);
		
		
			if (file.length) {
				this.upPicUrl = this.$api.uploadImg;;
				let filesNmae = 'nmoBackground_01.png'; // this.timeDate + 'png'
				this.imgFormData = {
					file: file,
					getsize: file.size,
					getContentType: ['image/png', 'image/jpeg'],
					getoriginalfilename: filesNmae,
					getName: filesNmae
				};
				this.$nextTick(() => {
					this.$refs.selectimgandupload.upload(); //图片上传
				});
			} else {
				this.img = '',
				this.imgStr = []
			}
			// this.niuyunLoop(file,0)
		
		},
		imgLoaded(e) {
			console.log(e)
		
			this.img = [];
			for (let i = 0; i < e.length; i++) {
				this.img.push(e[i].url);
			}
		
		
			this.imgStr = this.img
		
			this.img = this.imgStr.length === 1 ? this.imgStr[0].toString() : this.imgStr
				.join(',');
		},
		// 订单详情
		async Orderinfo(type) {
			let detailApi = this.type == 1 ? this.$api.orderDetail : this.type == 2 ? this.$api
								.grouponOrderDetail : this.type == 3 ? this.$api.seckillOrderDetail : this.type == 4? this.$api.bargainsOrderDetail :this.$api.presellOrderDetail
			
			const result = await this.$http.get({
				url: detailApi,
				data: {
					// 订单id
					order_id: this.id,
				
					// uid
					uid: uni.getStorageSync('uid'),
					
					
				}
			});
			if (result.errno == 0) {
				this.orderInfo = result.data;
				
			}
		},
		// 备注
		descInput(e) {
			this.remnant = e.detail.value.length;
			if (this.remnant >= 50) {
				this.$sun.toast('备注字数已达上限');
			}
		},
		setDefaultStar() {
			this.changeStar({
				curStar: this.defaultStar
			});
		},
		changeStar(e) {
			let status = e.curStar;
			this.defaultStar = status;
			status == 1
				? (this.commentStr = '非常差')
				: status == 2
				? (this.commentStr = '很差')
				: status == 3
				? (this.commentStr = '一般')
				: status == 4
				? (this.commentStr = '好')
				: status == 5
				? (this.commentStr = '非常好')
				: '';
		},
		// 提交评价
		addSpeakss() {
			if (!this.text) {
				this.$sun.toast('请输入评价','none');
			} else if(!this.img.length){
				this.$sun.toast('请上传图片','none');
			}else {
				antiThrottling.uniDoFunc({
					// 键名
					key: 'submit',
					success: async () => {
						//锁定
						antiThrottling.lockKey('submit');
						this.addComments();
					}
				});
			}
		},
		
		
		// 添加评论
		async addComments() {
			console.log(this.img,this.id)
			
			console.log(this.type,)
			const result = await this.$http.get({
				url: this.$api.evaluateAdd,
				data: {
					// 订单id
					order_id: this.id,
					// 1-普通商品 2-拼团商品 3-秒杀商品 4-砍价商品
					type:this.type,
					// uid
					uid: uni.getStorageSync('uid'),
					// grade defaultStar
					grade:this.defaultStar,
					// 内容
					content:this.text,
					// 图片
					pic_url:this.img
					
					
					
				}
			});
			if (result.errno == 0) {
				antiThrottling.releaseKey('submit');
				this.$sun.toast('评价成功');
				setTimeout(() => {
					uni.reLaunch({
						url: '/pages/mine/mine'
					});
				}, 500);
			} else {
				this.$sun.toast(result.message);
			}
		}
	}
};
</script>

<style lang="less">
page {
	background: #f0f0f0;
}
.sunui-star {
	margin-left: 40rpx;
}
/deep/.sunui-stars {
	width: 70%;
	display: inline-block;
}
/deep/.sunui-m {
	flex-wrap: nowrap !important;
	& > view {
		margin-right: 20rpx !important;
	}
}

.coupon {
	margin: 0rpx 28rpx 20rpx;
}
// 多行文本
.textarea-box {
	// width: 694rpx;
	padding: 28rpx;
	background: #f7f7f7;
	border-radius: 24rpx;
	width: 100%;
}

.textarea-color {
	color: #999;
}
// .v-width {
// 	width: 700rpx;
// 	display: flex;
// 	margin: 32rpx 0rpx 80rpx 28rpx;
// }
.addSpeak,
.addSpeak2 {
	width: 614rpx;
	height: 95rpx;
	font-size: 32rpx;
	border-radius: 56rpx;
	color: #ffffff;
	background: linear-gradient(90.00deg, rgb(0, 149, 255),rgb(0, 149, 255) 100%);
}

.all {
	
	height: auto;
	background: #ffffff;
	// border-radius: 20rpx 20rpx 0rpx 0rpx;
	margin-top: 24rpx;
	padding-bottom: 24rpx;
	padding: 0 20rpx;
}
.v-shop-cart {
	padding: 34rpx 34rpx 34rpx 0;
	border-bottom: 2rpx solid #f7f7f7;

	image {
		width: 140rpx;
		height: 140rpx;
		margin-right: 26rpx;
	}

	.v-content {
		.v-name {
			font-size: 32rpx;
			font-weight: bold;
		}

		text {
			color: #8f8f8f;
			// padding: 10rpx 0;
			padding: 10rpx 0 16rpx;
		}

		.v-price {
			color: #ff5f4e;
			font-size: 34rpx;
		}
	}
}
.v-padding {
	padding: 28rpx 32rpx 0rpx 0rpx;
}
.v-icon-size {
	margin-right: 12rpx;
	font-size: 32rpx;
	
}
.zongs {
	padding-bottom: 80rpx;
	background-color: #ffffff;
	border-radius: 0rpx 0rpx 20rpx 20rpx;
}
.starts {
	font-size: 24rpx;
	color: #4ec27a;
}
.commodity {
	padding: 0rpx 32rpx 46rpx 20rpx;
}
.img {
	width: 168rpx;
	height: 168rpx;
	margin-right: 12rpx;
	margin-bottom: 10rpx;
}
.v-font-width {
	font-size: 24rpx;
	width: 150rpx;
	text-align: center;
}
.v-p-left {
	padding-left: 18rpx;
}
.price {
	margin-bottom: 16rpx;
	font-size: 24rpx;
	font-weight: bold;
	text {
		font-size: 32rpx;
	}
}
.require,
.look {
	color: #4ec27a;
	font-size: 24rpx;
	border: 2rpx solid #4ec27a;
	border-radius: 146rpx;
	width: 130rpx;
	height: 56rpx;
	margin-right: 20rpx;
	margin-bottom: 20rpx;
}
.look {
	color: #999999;
	border: 2rpx solid #999999;
}
.v-m-btn {
	margin-bottom: 46rpx;
}
.speak {
	font-size: 32rpx;
	font-weight: bold;
	color: #333333;
	padding: 0rpx 32rpx 0rpx 20rpx;
}
</style>
